<template>
<div>
    <el-row>
        <el-col :span="24">
            <el-table
            v-loading="isLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            :data="myTagList"
            style="width: 100%"
            >
        <el-table-column
            prop="tagName"
            label="标签名称"
            class-name="col-font-size"
            width="400">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="180"
            sortable
            column-key="createTime"
            class-name="col-font-size">
        </el-table-column>
        <el-table-column
            label="操作"
            width="200">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                circle
                @click="handleEdit(scope.$index, scope.row,myTagList)"></el-button>
                <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDelete(scope.$index, scope.row,myTagList)"></el-button>
            </template>
        </el-table-column>
    </el-table>
        </el-col>
    </el-row>
</div>
</template>

<script>
import {request} from '@/network/request.js';
export default {
    name:"myTagList",
    props:{
        myTagList:{
            type:Array,
            required:true
        },
        isLoading:{
            type:Boolean,
            default:()=>false
        }
    },
    methods:{
        handleEdit(index,row,myTagList){
            console.log("编辑TAG操作");
             this.$prompt('新的TAG名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValidator:value=>{
                    let regInput=/^[^ ]+$/;
                    if(!value){
                        return "你还没有输入内容呀";
                    }
                    if(value.length>15){
                        return "输入的TAG名字不能超过20字符哦";
                    }
                    if(!regInput.test(value)){
                        return "TAG不能包含空格";
                    }
                    return true;
                },
                inputPlaceholder:"新的TAG"
            }).then(({ value }) => {
                const loading = this.$loading({
                        lock: true,
                        text: '操作中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                        });
                request({
                    url:"/tag/modifyTag",
                    method:"post",
                    data:{
                        userId:this.$store.getters.getCurrentUser.userId,
                        tagId:myTagList[index].tagId,
                        tagName:value
                    }
                }).then(res=>{
                    console.log(res);
                    loading.close();
                    if(res.data.status==="ok"){
                        row.tagName=value;
                    }else{
                        this.$message.error('这个TAG名字可能已经重复');
                    }
                }).catch(err=>{
                    console.log(err);
                    loading.close();
                    this.$message.error('服务器出错请稍后再试');
                });
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '取消输入'
            });       
        });
        },
        handleDelete(index,row,myTagList){
            console.log("删除TAG操作");
            this.$confirm('该操作会永久删除这个TAG, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    const loading = this.$loading({
                        lock: true,
                        text: '操作中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                        });
                    //进行删除操作
                    request({
                    url:"/tag/deleteTag",
                    method:"post",
                    data:{
                        tagId:myTagList[index].tagId
                    }
                }).then(res=>{
                    console.log(res);
                    loading.close();
                    if(res.data.status==="ok"){
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    });
                    myTagList.splice(index, 1);
                    }else{
                        this.$message.error('服务器出错，请稍后再试');
                    }
                }).catch(err=>{
                    console.log(err);
                    loading.close();
                    this.$message.error('服务器出错，请稍后再试');
                })
                }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
        }
    }
}
</script>

<style>
.in-operation-text {
    color: #FF69B4;
}
</style>